<template>
    <div class="design-form-wrapper">
        <form-generator :data="paramState" @save="onGenSaveBtn" />
    </div>
</template>

<script setup lang="ts">
    import { FormGenerator } from '@/components/generator';
    import { Modal } from 'ant-design-vue';

    //从query参数获取id
    const props = defineProps({
        query: {
            default: () => {},
            required: false,
        },
    });
    const paramState = reactive<Recordable>({});

    const onGenSaveBtn = async (elForm: Recordable[], form: Recordable, config: Recordable) => {
        if (elForm && !elForm.length) {
            Modal.error({ title: '请先设计表单填写内容，再进行保存！' });
            return;
        }

        console.log('elForm', elForm);
        console.log('form', form);
        console.log('config', config);
    };
</script>

<style scoped>
    .design-form-wrapper {
        background-color: #f5f5f5;
        padding: 12px;
        height: 100vh;
    }
</style>
